<template>
    <div class="fu">
        <button @click="changeTheme1">换肤</button>
        <div class="title">大伟聊前端</div>
        <hr />
        <button @click="changeTheme2">换肤</button>
        <div class="bg">大伟聊前端</div>
        <hr />
        <button @click="changeTheme3">换肤</button>
        <div class="head">大伟聊前端</div>
    </div>
</template>
<script>
export default {
    name: 'HelloWorld',
    data() {
        return {};
    },
    props: {
        msg: String
    },
    methods: {
        changeTheme1() {
            document.documentElement.style.setProperty('--theme_bg_color', 'green');
        },
        changeTheme2() {
            document.getElementById('theme').href = './theme_green.css';
        },
        changeTheme3() {
            document.getElementById('app').setAttribute('class', 'theme_green');
        }
    }
};
</script>
<style lang="less" scoped>
.title {
    background: var(--theme_bg_color);
    padding: 20px;
    margin-top: 20px;
    font-weight: 900;
}
.bg {
    padding: 20px;
    margin-top: 20px;
    font-weight: 900;
}
.head {
    padding: 20px;
    margin-top: 20px;
    font-weight: 900;
}
</style>
